<template>
  <!-- 人员管理--新增和编辑 -->
  <el-dialog :title="mode=='add'?'新增':'编辑'"
             class="addTax"
             width='662px'
             :close-on-click-modal="false"
             :visible.sync="visible">
    <!-- 具体表单 -->
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="100px">
      <el-form-item label="登录账号"
                    prop="username">
        <el-input v-model="dataForm.username"
                  placeholder="登录账号"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="password">
        <el-input placeholder="请输入密码"
                  autocomplete="new-password"
                  v-model.trim="dataForm.password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="政府单位名称"
                    prop="companyName">
        <el-input v-model="dataForm.companyName"
                  placeholder="政府单位名称"></el-input>
      </el-form-item>
      <el-form-item label="单位地址"
                    prop="companyAddr">
        <el-input v-model="dataForm.companyAddr"
                  placeholder="单位地址"></el-input>
      </el-form-item>
      <el-form-item label="联系人"
                    prop="contactPerson">
        <el-input v-model="dataForm.contactPerson"
                  placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item label="手机号码"
                    prop="mobile">
        <el-input v-model="dataForm.mobile"
                  placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="职位"
                    prop="job">
        <el-input v-model="dataForm.job"
                  placeholder="职位"></el-input>
      </el-form-item>
      <el-form-item label="状态"
                    prop="status">
        <el-radio v-model="dataForm.status"
                  label="1">正常</el-radio>
        <el-radio v-model="dataForm.status"
                  label="0">禁用</el-radio>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 class="btn"
                 @click="addSave"
                 v-if="mode == 'add'">确认新增</el-button>
      <el-button type="primary"
                 class="btn"
                 @click="update"
                 v-else>确认修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  // props: ['mode'],
  data () {
    return {
      mode: 'add',
      // 隐藏
      visible: false,
      // 数据
      // menuList: [],
      // menuListTreeProps: {
      //   label: 'name',
      //   children: 'children'
      // },
      dataForm: {
      },
      dataRule: {
        username: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 手机号码正则校验
              let _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ]
      },
      // options: [{
      //   value: '男',
      //   label: '男'
      // }, {
      //   value: '女',
      //   label: '女'
      // }],
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  methods: {
    // 父调用的方法
    addInit () {
      this.visible = true
    },
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$http({
        url: this.$http.adornUrl('/sys/user/info/' + this.dataForm.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataForm = data.user
        this.dataForm.password = undefined
        // 转字符串，方便显示
        this.dataForm.status = this.dataForm.status + ''
      })
    },
    // 图片上传成功处理
    handleAvatarSuccess (res, file) {
      this.dataForm.companyLicense = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      // 暂时废弃
      const isJPG = (file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG，png，gif 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleChange (file, fileList) {
      this.dataForm.companyLicense = URL.createObjectURL(file.raw)
    },
    // 修改
    update () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // this.dataForm.status = +this.dataForm.status
          this.$http({
            url: this.$http.adornUrl('/sys/user/update'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 新增
    // /sys/bill/save
    addSave () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dataForm.password !== '') {
            // this.dataForm.status = +this.dataForm.status
            this.dataForm.userRoleId = '4'
            this.$http({
              url: this.$http.adornUrl('/sys/user/save'),
              method: 'post',
              data: this.$http.adornParams(this.dataForm)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    // 成功之后的回调
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          } else {
            this.$message.error('密码不能为空！')
          }
        }
      })
    }
    // 结束
  }
}
</script>

<style lang="scss">
.addTax {
  .el-input.el-input--medium {
    width: 370px;
  }
  .el-dialog__header {
    background-color: #f8f8f8;
  }
  .el-dialog__body {
    display: flex;
    justify-content: center;
  }
  .btn {
    width: 370px;
  }
  .dialog-footer {
    text-align: center !important;
    padding-bottom: 39px;
  }
  .el-dialog__footer {
    text-align: center;
    padding-bottom: 39px;
  }
}
</style>
